<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>路由动态匹配</title>
</head>

<body>
  <div id="app">
    <router-link to="/lo">登录</router-link>
    <router-link to="/register">注册</router-link>
    <!-- 下面三个全部跳转到User组件 -->
    <router-link to="/user">用户01</router-link>
    <router-link to="/user">用户02</router-link>
    <router-link to="/user">用户03</router-link>
    <!-- 下面三个都不跳转了 -->
    <router-link to="/user/04">用户04</router-link>
    <router-link to="/user/05">用户05</router-link>
    <router-link to="/user/06">用户06</router-link>
    <!-- 下面三个跳转到对应的用户组件 -->
    <router-link to="/user/07">用户07</router-link>
    <router-link to="/user/08">用户08</router-link>
    <router-link to="/user/09">用户09</router-link>
    <!-- 下面三个跳转到对应的首页组件 -->
    <router-link to="/index/01">首页01</router-link>
    <router-link to="/index/02">首页02</router-link>
    <router-link to="/index/09/20">首页03</router-link>
    <!-- 下面三个跳转到对应的首页组件 -->
    <router-link to="/set/01">设置01</router-link>
    <router-link to="/set/02">设置02</router-link>
    <router-link to="/set/99/22">设置03</router-link>
    <!-- 现在呢，像 /show/张三 和 /show/李四 都将映射到相同的路由 -->
    <router-link to="/show/张三">设置01</router-link>
    <router-link to="/show/李四">设置02</router-link>

    <hr>
    <pre>
      <router-view></router-view>
    </pre>
  </div>
  <script src="../js/vue.js"></script>
  <script src="../js/vue-router.js"></script>
  <script>
    // 定义组件(组件配置对象)，可以使用const来声明
    let Login = {
      template: `<div>登录组件</div>`
    }
    let Register = {
      template: `<div>注册组件</div>`
    }
    let User = {
      template: `<div>用户组件</div>`
    }
    let Index = {
      template: `<div>首页组件</div>`
    }
    let Set = {
      //this我们在模板里面写，这里直接写$route,代表当前激活的路由对象
      // 通过params可以获取到传递进来的参数
      template: `<div>设置组件{{$route.params}}------{{$route.params.id}}</div>`
    }
    const Show = {
      template: '<div>展示组件{{$route.params.username}}</div>',
      mounted() {
        // 只会执行一次
        console.log('Show mounted....');
      },
      watch: {
        /*
          会执行多次
            监听当前路由的变化，当路由参数发生改变的时候，可以做出一些响应
          参数1：to  导航之后的路由对象
          参数2：from 导航之前的路由对象 
        */
        '$route'(to, from) {
          console.log('$route监听器执行了...');
          console.log('from', from);
          console.log('to', to);
        }
      }
    }

    // 定义路由列表，可以使用const来声明
    let routes = [{
        path: '/lo', //组件
        component: Login //路由映射
      },
      {
        path: '/register',
        component: Register
      },
      {
        path: '/user',
        component: User
      },
      {
        path: '/user/07',
        component: User
      },
      {
        path: '/user/08',
        component: User
      },
      {
        path: '/user/09',
        component: User
      },
      { //*  通配符 
        path: '/index/*',
        component: Index
      },
      {
        path: '/index/*',
        component: Index
      },
      { // 动态路径参数 以冒号开头
        path: '/set/:id',
        component: Set
      },
      {
        path: '/show/:username',
        component: Show
      }
      /* 
        不合适写法：如果有成千上万个用户，那么就需要配置很多很多相似的 
        合适写法：
          使用路径通配符实现（缺点是无法在组件中获取组件传递过来的参数）
          使用路径动态参数实现, :后面是自定义名称，我们可以同这个自定义名称获取传递过来的值
            在组件内部获取到传递进来的值
          一个“路径参数”使用冒号（:）标记。
          当匹配到一个路由时，参数值会被设置到 this.$route.params，
          可以在每个组件内使用。
          于是，我们可以更新 Show 的模板，输出当前用户的 UserName：
      */
    ]

    // 定义路由器，可以使用const来声明
    let router = new VueRouter({
      routes
    })

    // 创建Vue实例
    let vm = new Vue({
      el: '#app',
      data: {
        message: 'hello vuejs'
      },
      router
    })
  </script>
</body>

</html>